<template>
	<div class="addVideo">
		<el-dialog
			:title="`${type == 'add' ? '新增' : '编辑'}赞助商信息`"
			:visible.sync="dialogVisible"
			width="600px"
			:modal-append-to-body="false"
			:close-on-click-modal="false"
			custom-class="custom-dialog"
		>
			<el-form
				ref="forms"
				size="small"
				:model="forms"
				:rules="rules"
				label-width="140px"
				label-position="right"
			>
				<el-form-item label="赞助商名称：" prop="spon_name">
					<el-input
						v-model="forms.spon_name"
						placeholder="请输入赞助商名称"
						clearable
						maxlength="20"
						show-word-limit
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="用户名：" prop="user_name">
					<el-input
						v-model="forms.user_name"
						placeholder="请输入用户名"
						clearable
						maxlength="20"
						show-word-limit
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="手机号：" prop="contact_tel">
					<el-input
						v-model="forms.contact_tel"
						placeholder="请输入手机号"
						clearable
						maxlength="11"
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="联系人：" prop="contact_name">
					<el-input
						v-model="forms.contact_name"
						placeholder="请输入联系人"
						clearable
						maxlength="30"
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="密码：" prop="pass_word">
					<el-input
						v-model="forms.pass_word"
						placeholder="请输入密码"
						clearable
						show-password
						minlength="6"
						maxlength="15"
						type="password"
						style="width: 100%"
					/>
				</el-form-item>
			</el-form>
			<el-alert
				title="* 创建赞助商密码为必填，编辑信息时若输入密码会覆盖旧密码，无需修改为空即可。"
				type="warning"
				:closable="false"
			></el-alert>
			<span slot="footer" class="dialog-footer">
				<el-button style="margin-right: 5px" @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveVideos">保存</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import { mapGetters } from 'vuex'
	import { addSponsor, editSponsor, getSponsorDetail } from '@/api/user-manager.js'
	export default {
		name: 'addSponsor',
		data() {
			const validatePass = (rule, value, callback) => {
				if (value && value.length < 6) {
					return callback(new Error('长度为6-15位！'))
				}
				if (!this.forms.spon_id && !value) {
					return callback(new Error('密码不能为空'))
				}
				callback()
			}
			return {
				dialogVisible: false,
				disabled: false,
				forms: {
					title: '',
					content: ''
				},
				rules: {
					spon_name: [{ required: true, message: '请输入赞助商名称', trigger: 'change' }],
					user_name: [{ required: true, message: '请输入用户名', trigger: 'change' }],
					contact_tel: [
						{ required: true, message: '请输入手机号', trigger: 'change' },
						{ pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
					],
					pass_word: [{ validator: validatePass, trigger: 'change' }],
					contact_name: [{ required: true, message: '请输入联系人', trigger: 'change' }]
				},
				type: 'add',
				info: {}
			}
		},
		computed: {
			...mapGetters(['token', 'userInfo'])
		},
		methods: {
			async initData(type, info = {}) {
				this.type = type
				if (info.spon_id) {
					await this.getDetailInfo(info.spon_id)
				} else {
					this.forms = {
						spon_id: info.spon_id || '',
						spon_name: info.spon_name || '',
						user_name: info.user_name || '',
						contact_tel: info.contact_tel || '',
						pass_word: '',
						contact_name: info.contact_name || ''
					}
				}
				this.dialogVisible = true
				this.$nextTick(() => {
					this.$refs.forms.clearValidate()
				})
			},
			async getDetailInfo(spon_id) {
				const loading = this.$setLoading()
				try {
					const res = await getSponsorDetail({ spon_id })
					const { add_time, ...params } = res.data
					this.forms = params
					loading.close()
				} catch (e) {
					loading.close()
					console.log(e)
				}
			},
			// 保存
			async saveVideos() {
				this.$refs.forms.validate(async valid => {
					if (valid) {
						const loading = this.$setLoading({
							lock: true,
							text: '数据提交中~'
						})
						const func = this.forms.spon_id ? editSponsor(this.forms) : addSponsor(this.forms)
						Promise.all([func])
							.then(res => {
								this.dialogVisible = false
								this.$parent.loadData()
							})
							.finally(() => loading.close())
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.addVideo {
		::v-deep {
			.el-dialog .el-dialog__body {
				padding-bottom: 20px;
			}
			.el-form .el-form-item {
				margin-bottom: 16px;
			}
		}
		.box-wrap {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
	}
</style>
